<template>
  <div class="Adduser">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" ref="chartDom" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
const chartDom = ref(null);
let myChart = null;

// 左边折线图
let option;
option = {
  title: {
    text: "近一年月新增数",
    top: "3%",
    left: "3%",
    textStyle: {
      fontSize: 20,
      color: "#ff6a6c",
    },
  },
  xAxis: {
    type: "category",
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
  },
  yAxis: {
    type: "value",
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,0.3)",
    borderWidth: 0,
    textStyle: {
      color: "#fff",
    },
  },
  legend: {
    data: ["新增数"],
  },
  series: [
    {
      data: [320, 440, 390, 434, 290, 250, 434, 390, 400, 290, 440],
      type: "line",
      smooth: true,
      symbol: "none",
      radius: ["80%"],
      width: "80%",
      hight: "80%",
      itemStyle: {
        color: "#ff6a6c",
      },
      name: "新增数",
      lineStyle: {
        color: "#ff6a6c",
        width:"3",
        shadowColor: "rgb(255,102,102)",
        shadowBlur: 15,
        shadowOffsetX: -20,
        shadowOffsetY: 20,
      },
    },
  ],
};

onMounted(() => {
  myChart = echarts.init(chartDom.value);
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 让图例大小随窗口变化自适应
  window.addEventListener("resize", () => {
    if (myChart) {
      myChart.resize();
    }
  });
});
// 让图例大小随窗口变化自适应 这个方法得手动刷新图列才能变化
// window.onresize = function () {
//   myChart.resize();
// };
</script>

<style lang="less" scoped>
.Adduser {
  width: 100%;
}
#main {
  width: 100%;
  height: 400px;
}
</style>
